<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="custom-nav">
      <view class="nav-back" @click="handleBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">矿主查询</text>
    </view>

    <!-- 当前账号信息 -->
    <view class="account-info">
      <text class="account-label">当前账号：</text>
      <text class="account-name">{{ currentAccountInfo.nickname || '未选择账号' }}</text>
    </view>

    <!-- 固定顶部按钮组 -->
    <view class="fixed-button-group">
      <view class="action-button refresh" @click="handleRefresh">重新查询</view>
      <view class="action-button toggle" 
            :class="{ 'pause': !isQueryPaused, 'resume': isQueryPaused }"
            @click="toggleQuery">
        {{ isQueryPaused ? '继续' : '暂停' }}
      </view>
      <view class="action-button copy" @click="handleCopy">复制ID</view>
    </view>

    <!-- 顶部统计卡片 -->
    <view class="stats-card">
      <!-- 添加灵石阈值选择器 -->
      <view class="threshold-selector">
        <text class="threshold-label">灵石等级筛选</text>
        <picker 
          :value="selectedOreLevel - 1" 
          :range="ORE_LEVELS" 
          range-key="label"
          @change="handleThresholdChange"
          class="threshold-picker"
        >
          <view class="picker-content">
            <text class="picker-text">{{ ORE_LEVELS[selectedOreLevel - 1].label }}</text>
            <text class="picker-arrow">▼</text>
          </view>
        </picker>
      </view>
      <view class="stats-grid">
        <view class="stats-item">
          <text class="stats-value">{{ mineOwnerList.length }}</text>
          <text class="stats-label">矿主数量</text>
        </view>
        <view class="stats-item highlight">
          <text class="stats-value">{{ totalOre }}</text>
          <text class="stats-label">总灵石数</text>
        </view>
      </view>
    </view>

    <!-- 列表区域 -->
    <view class="list-card">
      <view class="list-header">
        <view style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
          <text class="list-title">矿主列表</text>
          <text class="list-subtitle">共 {{ mineOwnerList.length }} 人</text>
        </view>
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <input type="text" v-model="searchText" placeholder="搜索矿主昵称或ID" class="search-input" />
      </view>

      <!-- 列表内容 -->
      <scroll-view 
        scroll-y 
        class="member-list"
        :style="{ height: scrollHeight + 'px' }"
      >
        <view 
          class="member-card" 
          v-for="(item, index) in filteredList" 
          :key="index"
          :class="{ 'member-card-highlight': item.isNew }"
        >
          <view class="member-info">
            <view class="member-header">
              <text class="member-nickname">{{ item.nickname }}</text>
              <text class="member-role-id">ID: {{ item.roleId }}</text>
            </view>
            <view class="member-status">
              <text class="status-tag2">灵石: {{ formatNumber(item.ore) }}</text>
              <text class="member-rank">{{ item.name }}</text>
              <text class="member-index">#{{ index + 1 }}</text>
            </view>
          </view>
        </view>

        <!-- 加载状态 -->
        <view class="loading-container" v-if="isLoading">
          <view class="loading-spinner"></view>
          <text class="loading-text">正在加载...</text>
        </view>

        <!-- 无数据状态 -->
        <view class="empty-state" v-else-if="!isLoading && filteredList.length === 0">
          <text class="empty-icon">💎</text>
          <text class="empty-text">暂无符合条件的矿主</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 矿主列表数据
const mineOwnerList = ref([])
// 加载状态
const isLoading = ref(false)
// 滚动区域高度
const scrollHeight = ref(0)
// 灵石阈值等级定义
const ORE_LEVELS = [
  { level: 1, threshold: 100000, label: '1阶' },
  { level: 2, threshold: 300000, label: '2阶' },
  { level: 3, threshold: 600000, label: '3阶' },
  { level: 4, threshold: 1100000, label: '4阶' },
  { level: 5, threshold: 1900000, label: '5阶' },
  { level: 6, threshold: 2900000, label: '6阶' },
  { level: 7, threshold: 4900000, label: '7阶' },
  { level: 8, threshold: 7900000, label: '8阶' },
  { level: 9, threshold: 12900000, label: '9阶' },
  { level: 10, threshold: 22900000, label: '10阶' }
]

// 当前选择的灵石阈值等级
const selectedOreLevel = ref(4) // 默认选择4阶

// 计算当前阈值
const ORE_THRESHOLD = computed(() => {
  const level = ORE_LEVELS.find(l => l.level === selectedOreLevel.value)
  return level ? level.threshold : 1100000 // 默认值
})

// 查询状态
const nextPage = ref(0)
const hasMoreData = ref(false)
const isInitialLoad = ref(true)
// 查询控制
const isQueryPaused = ref(false)
const queryController = ref(null)

// 房间ID列表
const roomIds = [
  100003, 100004, 100005, 100006, 100008, 100009, 100010, 100011, 100012, 100013,
  100014, 100015, 100016, 100018, 100021, 100022, 100024, 100025, 100026, 100027,
  100028, 100029, 100030, 100034, 100035, 100037, 100039, 100040, 100042, 100043,
  100044, 100045, 100046, 100047, 100048, 100050, 100054, 100055, 100056, 100057,
  100058, 100059, 100060, 100061, 100062, 100063, 100064, 100065, 100066, 100067,
  100069, 100070, 100071, 100072, 100073, 100074, 100075, 100076, 100077, 100078,
  100079, 100080, 100081, 100082, 100083, 100084, 100085, 100087, 100088, 100089,
  100090, 100091, 100092, 100093, 100094, 100095, 100096, 100098, 100100, 100101,
  100102, 100103, 100105, 100106, 100108, 100109, 100110, 100111, 100112, 100113,
  100114, 100116, 100117, 100119, 100120, 100121, 100122, 100123, 100124, 100125,
  100126, 100127, 100128, 100129, 100130, 100132, 100134, 100136, 100137, 100138,
  100140, 100141, 100143, 100145, 100146, 100147, 100148, 100149, 100150, 100152,
  100153, 100154, 100155, 100157, 100158, 100159, 100161, 100162, 100163, 100164,
  100165, 100166, 100167, 100168, 100169, 100170, 100171, 100174, 100175, 100177,
  100178, 100181, 100182, 100183, 100184, 100185, 100187, 100188, 100190, 100191,
  100192, 100193, 100194, 100196, 100197, 100198, 100200, 100201, 100203, 100204,
  100205, 100206, 100207, 100208, 100209, 100210, 100211, 100212, 100213, 100214,
  100216, 100217, 100222, 100223, 100226, 100227, 100228, 100229, 100230, 100231,
  100233, 100238, 100241, 100246, 100247, 100249, 100250, 100251, 100252, 100253,
  100254, 100257, 100268, 100303, 100312, 100372, 100418, 100420, 100429, 100431,
  100433, 100443, 100449, 100451, 100452, 100454, 100456, 100465, 100470, 100474,
  100475, 100495, 100498, 100502, 100505, 100509, 100515, 100517, 100518, 100521,
  100524, 100525, 100528, 100539, 100543, 100547, 100548, 100551, 100554, 100651,
  100653, 100658, 100671, 100673, 100682, 100690, 100700, 100729, 100744, 100745,
  100756, 100769, 100770, 100791, 100803, 100804, 100805, 100806, 100820, 100826,
  100842, 100853, 100872, 100876, 100877, 100947, 100950, 100969, 100991, 101012,
  101017, 101045, 101059, 101060, 101061, 101084, 101159, 101228, 101251, 101253,
  101268, 101271, 101273, 101279, 101281, 101283
]

// 当前房间索引
const currentRoomIndex = ref(0)

// 搜索文本
const searchText = ref('')

// 格式化数字（添加千位分隔符）
const formatNumber = (num) => {
  return parseInt(num).toLocaleString('zh-CN')
}

// 计算总灵石数
const totalOre = computed(() => {
  return formatNumber(mineOwnerList.value.reduce((sum, item) => sum + parseInt(item.ore || 0), 0))
})

// 过滤列表
const filteredList = computed(() => {
  if (!searchText.value) return mineOwnerList.value
  const searchLower = searchText.value.toLowerCase()
  return mineOwnerList.value.filter(
    item =>
      item.nickname.toLowerCase().includes(searchLower) ||
      item.roleId.toString().includes(searchText.value)
  )
})

// 复制数据到剪贴板
const handleCopy = () => {
  if (mineOwnerList.value.length === 0) {
    uni.showToast({
      title: '没有可复制的数据',
      icon: 'none'
    })
    return
  }

  // 只复制角色ID
  const roleIds = mineOwnerList.value
    .map(item => item.roleId)
    .join('\n')

  // 复制到剪贴板
  uni.setClipboardData({
    data: roleIds,
    success: () => {
      uni.showToast({
        title: `已复制${mineOwnerList.value.length}个ID`,
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none'
      })
    }
  })
}

// 检查 AbortController 是否可用
const createAbortController = () => {
  if (typeof AbortController !== 'undefined') {
    return new AbortController()
  }
  // 如果不支持 AbortController，返回一个模拟对象
  return {
    signal: {},
    abort: () => {}
  }
}

// 从存储中加载数据
const loadStoredData = () => {
  const storedMineOwnerList = uni.getStorageSync('mine_owner_list')
  if (storedMineOwnerList) {
    try {
      const list = typeof storedMineOwnerList === 'string' ? JSON.parse(storedMineOwnerList) : storedMineOwnerList
      mineOwnerList.value = list
      console.log('从存储中加载矿主数据，数量:', list.length)
      return true
    } catch (error) {
      console.error('解析存储的矿主数据失败:', error)
    }
  }
  return false
}

// 保存数据到存储
const saveDataToStorage = () => {
  try {
    uni.setStorageSync('mine_owner_list', JSON.stringify(mineOwnerList.value))
    console.log('保存矿主数据到存储，数量:', mineOwnerList.value.length)
  } catch (error) {
    console.error('保存矿主数据失败:', error)
  }
}

// 当前账号信息
const currentAccountInfo = ref({
  nickname: '',
  uid: ''
})

// 获取当前账号信息
const getCurrentAccount = () => {
  const config = uni.getStorageSync('plunder_config')
  if (!config) {
    currentAccountInfo.value = {
      nickname: '未登录',
      uid: ''
    }
    return null
  }
  try {
    const configData = typeof config === 'string' ? JSON.parse(config) : config
    currentAccountInfo.value = {
      nickname: configData.nickname || '未知账号',
      uid: configData.uid || ''
    }
    return configData
  } catch (error) {
    console.error('解析账号信息失败:', error)
    currentAccountInfo.value = {
      nickname: '账号信息错误',
      uid: ''
    }
    return null
  }
}

// 获取系统信息设置滚动区域高度
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  scrollHeight.value = systemInfo.windowHeight - uni.upx2px(100)
  
  // 先尝试加载存储的数据
  const hasStoredData = loadStoredData()
  if (!hasStoredData) {
    // 如果没有存储数据，开始新的查询
    getMineOwnerList()
  }
})

// 获取矿主列表
const getMineOwnerList = async () => {
  if (isLoading.value || isQueryPaused.value) return
  isLoading.value = true

  try {
    if (currentRoomIndex.value === 0 && nextPage.value === 0) {
      mineOwnerList.value = []
      uni.removeStorageSync('mine_owner_list')
      console.log('开始新查询，清除旧数据')
    }

    queryController.value = createAbortController()
    const signal = queryController.value.signal

    const config = getCurrentAccount()
    if (!config || !config.token || !config.uid) {
      uni.showModal({
        title: '提示',
        content: '请先登录',
        showCancel: false,
        success: () => {
          uni.switchTab({
            url: '/pages/attack/index'
          })
        }
      })
      isLoading.value = false
      return
    }

    const token = config.token
    const uid = config.uid

    const configData = typeof config === 'string' ? JSON.parse(config) : config

    const url = "https://farm-api.lucklyworld.com/v8/api/game/room/union/member"
    const headers = {
      "User-Agent": "com.caike.lomo/4.2.6 (Linux; U; Android 12; zh-cn) (91416; 402060)bbcbce6e97449754",
      "Channel": "official",
      "DEVICEID": "",
      "ANDROIDID": "699e5ddaad221888",
      "oaid": "",
      "IMEI": "358022026118275",
      "test-encrypt": "0",
      "uid": uid,
      "token": token,
      "Content-Type": "application/json; charset=utf-8",
    }

    let allData = isInitialLoad.value ? [] : [...mineOwnerList.value]
    let retryCount = 0
    const maxRetries = 3
    let totalItems = 0
    let filteredItems = 0
    let emptyPageCount = 0
    const maxEmptyPages = 3

    while (currentRoomIndex.value < roomIds.length && retryCount < maxRetries && !isQueryPaused.value) {
      const currentRoomId = roomIds[currentRoomIndex.value]
      console.log(`开始获取房间 ${currentRoomId} 的数据，当前进度: ${currentRoomIndex.value + 1}/${roomIds.length}`)

      try {
        const data = {
          next: nextPage.value,
          roomId: currentRoomId,
          sortRule: 2,
          sortColumn: 2
        }

        console.log('发送请求参数:', {
          ...data,
          currentPage: nextPage.value === 0 ? '第一页' : `第${nextPage.value}页`,
          当前房间: currentRoomId
        })

        const response = await uni.request({
          url,
          method: 'POST',
          header: headers,
          data,
          signal
        })

        if (isQueryPaused.value) {
          console.log('查询已暂停')
          break
        }

        console.log('API响应状态:', {
          statusCode: response.statusCode,
          hasData: !!response.data,
          hasItems: response.data && Array.isArray(response.data.items),
          当前房间: currentRoomId
        })

        if (response.statusCode === 401) {
          console.log('登录已过期，需要重新登录')
          uni.showModal({
            title: '提示',
            content: '登录已过期，请重新登录',
            showCancel: false,
            success: () => {
              uni.switchTab({
                url: '/pages/attack/index'
              })
            }
          })
          break
        }

        const responseData = response.data
        if (!responseData || !Array.isArray(responseData.items)) {
          console.error('返回数据格式不正确:', responseData)
          throw new Error('返回数据格式不正确')
        }

        const items = responseData.items || []
        totalItems += items.length
        console.log('当前页数据统计:', {
          当前页数据量: items.length,
          累计数据量: totalItems,
          下一页标识: responseData.next || '无',
          当前房间: currentRoomId
        })
        
        if (items.length === 0) {
          emptyPageCount++
          console.log(`遇到空页，当前连续空页数: ${emptyPageCount}, 当前房间: ${currentRoomId}`)
          if (emptyPageCount >= maxEmptyPages) {
            console.log(`已连续遇到${maxEmptyPages}个空页，切换到下一个房间`)
            currentRoomIndex.value++
            nextPage.value = 0
            emptyPageCount = 0
            continue
          }
        } else {
          emptyPageCount = 0
        }
        
        const currentFilteredItems = items.filter(item => {
          const ore = parseInt(item.ore || 0)
          const isAboveThreshold = ore >= ORE_THRESHOLD.value
          if (isAboveThreshold) {
            console.log('符合条件的矿主:', {
              昵称: item.nickname,
              灵石: ore,
              段位: item.name,
              角色ID: item.roleId,
              房间ID: currentRoomId
            })
          }
          return isAboveThreshold
        })
        
        filteredItems += currentFilteredItems.length
        console.log('数据过滤统计:', {
          当前页过滤后数量: currentFilteredItems.length,
          累计过滤后数量: filteredItems,
          过滤阈值: ORE_THRESHOLD.value,
          当前房间: currentRoomId
        })

        allData = allData.concat(currentFilteredItems)
        mineOwnerList.value = allData
        // 每获取一批数据就保存一次
        saveDataToStorage()

        hasMoreData.value = !!responseData.next && items.length > 0
        if (hasMoreData.value) {
          nextPage.value = responseData.next
          console.log('准备获取下一页:', nextPage.value)
        } else {
          console.log('当前房间数据获取完成，准备切换到下一个房间')
          currentRoomIndex.value++
          nextPage.value = 0
          emptyPageCount = 0
        }

        // 移除初始加载的限制，让它继续获取所有数据
        if (isInitialLoad.value) {
          isInitialLoad.value = false
        }

        await new Promise(resolve => setTimeout(resolve, 1000))
        retryCount = 0
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('查询被取消')
          break
        }
        console.error('获取数据失败:', {
          错误信息: error.message,
          重试次数: retryCount + 1,
          最大重试次数: maxRetries,
          当前房间: currentRoomId
        })
        retryCount++
        if (retryCount >= maxRetries) {
          console.log('当前房间重试次数达到上限，切换到下一个房间')
          currentRoomIndex.value++
          nextPage.value = 0
          retryCount = 0
          continue
        }
        await new Promise(resolve => setTimeout(resolve, 1000))
      }
    }

    console.log('数据获取最终统计:', {
      总数据量: totalItems,
      过滤后数据量: filteredItems,
      最终列表长度: mineOwnerList.value.length,
      重试次数: retryCount,
      连续空页数: emptyPageCount,
      当前房间索引: currentRoomIndex.value,
      总房间数: roomIds.length
    })

    if (mineOwnerList.value.length === 0) {
      console.log('未找到符合条件的矿主数据')
      uni.showToast({
        title: '未找到符合条件的矿主',
        icon: 'none',
        duration: 2000
      })
    } else {
      console.log('数据获取成功，最终矿主数量:', mineOwnerList.value.length)
    }

  } catch (error) {
    console.error('获取数据过程发生错误:', {
      错误信息: error.message,
      错误堆栈: error.stack
    })
    uni.showModal({
      title: '提示',
      content: '获取数据失败，请稍后重试',
      showCancel: false
    })
  } finally {
    isLoading.value = false
    queryController.value = null
  }
}

// 暂停查询
const pauseQuery = () => {
  isQueryPaused.value = true
  if (queryController.value && typeof queryController.value.abort === 'function') {
    queryController.value.abort()
  }
  queryController.value = null
  console.log('查询已暂停')
}

// 恢复查询
const resumeQuery = () => {
  isQueryPaused.value = false
  console.log('查询已恢复')
  // 如果还有更多数据，继续查询
  if (hasMoreData.value && !isLoading.value) {
    console.log('继续获取数据')
    getMineOwnerList()
  }
}

// 页面卸载时暂停查询
onUnmounted(() => {
  pauseQuery()
})

// 页面显示时恢复查询
onShow(() => {
  const account = getCurrentAccount()
  if (account && !isInitialLoad.value && hasMoreData.value && !isLoading.value) {
    console.log('页面显示，继续获取数据')
    resumeQuery()
  }
})

// 页面隐藏时暂停查询
onHide(() => {
  pauseQuery()
})

// 修改重新查询函数
const handleRefresh = () => {
  pauseQuery()
  nextPage.value = 0
  currentRoomIndex.value = 0
  mineOwnerList.value = []
  // 清除存储的矿主列表
  uni.removeStorageSync('mine_owner_list')
  console.log('清除矿主数据，开始重新查询')
  hasMoreData.value = true
  isInitialLoad.value = true
  isQueryPaused.value = false
  // 直接开始新的查询
  getMineOwnerList()
}

// 切换查询状态
const toggleQuery = () => {
  if (isQueryPaused.value) {
    resumeQuery()
  } else {
    pauseQuery()
  }
}

// 处理阈值变化
const handleThresholdChange = (e) => {
  const newLevel = parseInt(e.detail.value) + 1
  if (newLevel !== selectedOreLevel.value) {
    selectedOreLevel.value = newLevel
    // 清除存储的数据并重新查询
    uni.removeStorageSync('mine_owner_list')
    handleRefresh()
  }
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};
</script>

<style>
.container {
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
}

/* 自定义导航栏样式 */
.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.nav-back {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-right: 88rpx; /* 为了保持标题居中，抵消返回按钮的宽度 */
}

/* 调整搜索区域的上边距，为导航栏留出空间 */
.search-area {
  margin-top: 120rpx;
  padding: 24rpx;
}

/* 统计卡片样式 */
.stats-card {
  margin-top: 256rpx; /* 88rpx(导航栏) + 56rpx(账号信息) + 88rpx(按钮组) + 24rpx(间距) */
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.stats-header {
  margin-bottom: 20rpx;
}

.stats-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
  display: block;
}

.stats-subtitle {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-top: 4rpx;
  display: block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 16rpx;
}

.stats-item {
  background: #ffffff;
  padding: 20rpx;
  border-radius: 12rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

.stats-item.highlight {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
}

.stats-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #2c3e50;
  display: block;
}

.stats-item.highlight .stats-value {
  color: #ffffff;
}

.stats-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-top: 4rpx;
  display: block;
}

.stats-item.highlight .stats-label {
  color: rgba(255, 255, 255, 0.9);
}

/* 列表卡片样式 */
.list-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.list-header {
  margin-bottom: 20rpx;
}

.list-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
  display: block;
}

.list-subtitle {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-top: 4rpx;
  display: block;
}

/* 搜索框样式 */
.search-box {
  margin-bottom: 20rpx;
}

.search-input {
  background: #f5f7fa;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #2c3e50;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
}

/* 成员列表样式 */
.member-list {
  height: calc(100vh - 300rpx);
  margin-bottom: 0; /* 移除底部间距 */
}

.member-card {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  border: 1rpx solid #edf2f7;
  transition: all 0.3s ease;
}

.member-card-highlight {
  background: #fff8f8;
  border-color: #ffd700;
  animation: highlight 3s ease-out;
}

@keyframes highlight {
  0% {
    background: #fff8f8;
  }
  100% {
    background: #ffffff;
  }
}

.member-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.member-header {
  flex: 1;
}

.member-nickname {
  font-size: 28rpx;
  font-weight: 500;
  color: #2c3e50;
  display: block;
}

.member-role-id {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-top: 4rpx;
  display: block;
}

.member-status {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-tag2 {
  background: #ffd700;
  color: #ffffff;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.member-rank {
  font-size: 24rpx;
  color: #7f8c8d;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  background: #f5f7fa;
}

.member-index {
  font-size: 24rpx;
  color: #7f8c8d;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #ffd700;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16rpx;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 24rpx;
  color: #7f8c8d;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
}

.empty-icon {
  font-size: 64rpx;
  margin-bottom: 16rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #7f8c8d;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 12rpx;
}

.action-button {
  padding: 16rpx 32rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  border-radius: 12rpx;
  border: none;
  transition: all 0.3s ease;
}

.action-button.refresh {
  background: #ff6b6b;
  color: #ffffff;
}

.action-button.toggle {
  background: #4CAF50;
  color: #ffffff;
}

.action-button.toggle.pause {
  background: #ff9800;
}

.action-button.toggle.resume {
  background: #2196F3;
}

.action-button.copy {
  background: #7f8c8d;
  color: #ffffff;
}

.action-button:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 响应式适配 */
@media screen and (min-width: 768px) {
  .container {
    max-width: 800rpx;
    margin: 0 auto;
  }

  .custom-nav {
    max-width: 800rpx;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 16rpx 16rpx;
  }

  .fixed-button-group {
    max-width: 800rpx;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 16rpx 16rpx;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .member-list {
    height: calc(100vh - 200rpx);
  }

  .threshold-selector {
    max-width: 600rpx;
    margin: 0 auto 20rpx;
  }

  .picker-content {
    min-width: 160rpx;
  }
}

/* 阈值选择器样式 */
.threshold-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.threshold-label {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
}

.threshold-picker {
  flex: 1;
  margin-left: 20rpx;
}

.picker-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx 24rpx;
  background: #f5f7fa;
  border-radius: 8rpx;
  min-width: 120rpx;
}

.picker-text {
  font-size: 28rpx;
  color: #2c3e50;
}

.picker-arrow {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-left: 12rpx;
}

/* 修改固定按钮组样式 */
.fixed-button-group {
  position: fixed;
  top: 144rpx; /* 88rpx(导航栏) + 56rpx(账号信息) */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 99; /* 确保在导航栏下方 */
}

.fixed-button-group .action-button {
  flex: 1;
  margin: 0 10rpx;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 账号信息样式 */
.account-info {
  position: fixed;
  top: 88rpx; /* 导航栏高度 */
  left: 0;
  right: 0;
  padding: 16rpx 24rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 98;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-label {
  font-size: 28rpx;
  color: #7f8c8d;
}

.account-name {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
  margin-left: 8rpx;
}
</style> 